<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>首页</title>
		<script src="js/layui/layui.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
		<link rel="stylesheet" href="css/main.css" />
		<style>
			.nav-ul {
				text-align: right;
			}
			
			.nav-img {
				margin-right: 60px
			}
			
			.content {
				height: calc(100% - 104px);
			}
			
			iframe {
				width: 100%;
				height: 100%;
				border: 0;
				overflow-y: auto;
			}
			
			.footbar {
				display: flex;
				justify-content: center;
				height: 40px;
				background-color: #eee;
			}
			
			.footbar span{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.footbar span a {
				
				color: #6699FF;
			}
		</style>
	</head>

	<body>
		<div class="page">
			<!--
            	作者：1832600296@qq.com
            	时间：2018-02-25
            	描述：导航
            -->
			<div class="header">
				<ul class="layui-nav nav-ul" lay-filter="navfilter">
					<img src="img/logo.png" class="layui-nav-img nav-img">
					<li id="DreamWorld" class="layui-nav-item layui-this">
						<a>梦想天地</a>
					</li>
					<li id="ArtsPalace" class="layui-nav-item">
						<a>艺术殿堂</a>
					</li>
					<li id="DriedFood" class="layui-nav-item">
						<a>干货集锦</a>
					</li>
					<!--<li id="ChatStars" class="layui-nav-item">
						<a>畅聊星海</a>
					</li>-->
				</ul>
			</div>
			<!--
            	作者：1832600296@qq.com
            	时间：2018-02-25
            	描述：内容
            -->
			<div class="content">
				<iframe id="iframe" src="DreamWorld.html"></iframe>
			</div>
			<!--
            	作者：1832600296@qq.com
            	时间：2018-03-01
            	描述：底部导航
            -->
			<div class="footbar">
				<span><a href="http://www.miitbeian.gov.cn" target="_blank">豫ICP备17024763号</a></span>
			</div>

		</div>
	</body>

</html>

<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use('element', function() {
		var element = layui.element;

		element.on('nav(navfilter)', function(elem) {
			//console.log(elem[0].id); //得到当前点击的DOM对象

			var href = elem[0].id + '.html';
			if(elem[0].id == "") {
				href = "DreamWorld.html";
			}
			$("#iframe").attr('src', href);
		});
	});
</script>